<template>
  <je-modal
    v-model:visible="visibleModule"
    width="500px"
    height="auto"
    class="sql-configuration"
    :title="$t('SqlConfiguration.title')"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="addModule"
    @close="cancelModal"
  >
    <je-form layout="vertical" autocomplete="off">
      <je-form-item v-bind="validateInfos.sql" class="sql-label" name="sql">
        <template #label>
          <span>{{ $t('SqlConfiguration.sql') }}</span>
          <je-button size="mini" type="text" @click="showSqlWin">{{
            $t('SqlConfiguration.btnText')
          }}</je-button>
        </template>
        <je-textarea v-model:value="formState.sql" :rows="6" />
      </je-form-item>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, watch, ref, reactive } from 'vue';
  import { Input, Modal, Form, Button } from '@jecloud/ui';
  import { verifyData } from '@/helper/common';
  import { showFuncQuerys } from '@jecloud/func';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'SqlConfiguration',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeTextarea: Input.TextArea,
      JeButton: Button,
    },
    props: {
      checkedRow: {
        type: Object,
        default: () => {
          return {};
        },
      },
      funcInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['setModalType', 'closeModal'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(true);
      const formState = reactive({
        sql: props.checkedRow.resourceName || '',
      });
      const rulesRef = reactive({
        sql: [verifyData.required],
      });
      const { resetFields, validate, validateInfos } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });

      const addModule = ({ $modal, button }) => {
        //保存数据逻辑
        validate()
          .then(() => {
            emit('setModalType', { type: 'SqlConfiguration', data: { sql: formState.sql } });
            emit('closeModal', { type: 'ok', modalType: 'sql' });
            $modal.close();
          })
          .catch((error) => {});
        return false;
      };
      //弹窗sql拼装器
      const showSqlWin = () => {
        showFuncQuerys({
          funcId: props.funcInfo.funcId || '',
          value: formState.sql || '',
          callback: (val) => {
            formState.sql = val;
          },
        });
      };

      //弹窗关闭方法
      const cancelModal = () => {
        emit('closeModal', { type: 'cancel', modalType: 'sql' });
      };

      return {
        validateInfos,
        resetFields,
        addModule,
        visibleModule,
        formState,
        showSqlWin,
        cancelModal,
      };
    },
  });
</script>

<style lang="less">
  .sql-configuration {
    .ant-col.ant-form-item-control {
      min-height: auto !important;
    }
    .je-form {
      .sql-label {
        .ant-form-item-required {
          width: 100%;
          position: relative;
          .ant-btn {
            position: absolute;
            right: 0;
            line-height: 26px;
          }
        }
      }
    }
  }
</style>
